<template>
  <je-modal
    v-model:visible="visible"
    class="expression-editor-code"
    width="600px"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <template #title>
      <div class="title">
        <i
          v-if="recordData.value"
          class="fal fa-function"
          style="color: #239f75; font-size: 14px; margin-right: 1px"
        ></i>
        {{ title }}
      </div>
    </template>

    <je-editor-code ref="editor" v-model:value="value" height="400" width="100%" @save="onSave" />
  </je-modal>
</template>

<script>
  import { toRefs, reactive, defineComponent } from 'vue';
  import { EditorCode, Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'ExpressionEditorCode',
    components: {
      JeModal: Modal,
      JeEditorCode: EditorCode,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visible: props.visble,
        title: props.recordData.title,
        key: props.recordData.key,
        value: props.recordData.value,
      });

      const methods = {
        onSave(value) {
          state.value = value;
        },

        handleOk() {
          emit('changeModal', {
            key: state.key,
            value: state.value,
            visible: false,
          });
        },

        handleClose() {
          emit('changeModal', { visble: false });
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less" scoped>
  .expression-editor-code {
    .title {
      width: 100%;
    }
  }
</style>
